<template>
    <div id="app">
        <el-container class="container">
            <el-aside :width="collapse ? '64px' : '230px'">
                <el-header style="cursor: pointer;">
                    <div class="aside-title" @click="clickToIndex" style="color: #fff">管理系统</div>
                </el-header>
                <el-menu
                    background-color="#333744"
                    :text-color="'#fff'"
                    :unique-opened="true"
                    :collapse="collapse"
                    :collapse-transition="false"
                    :router="true"
                    :active-text-color="'#ffd04b'"
                    :default-active="$route.path"
                    v-if="first">
                    <template v-for="(item, index) in listData1" v-if="item.level !== 4">
                        <el-submenu :index="'submenu-' + index">
                            <template v-slot:title>
                                <i class="el-icon-location"></i>
                                <span>{{ item.name }}</span>
                            </template>
                            <!-- 子菜单项 -->
                            <template v-for="(child, childIndex) in item.children"
                                      v-if="child.level !== 4">
                                <el-submenu v-if="child.children && hasValidChildren(child.children)"
                                            :index="'submenu-' + index + '-' + childIndex">
                                    <template v-slot:title>
                                        <i class="el-icon-menu"></i>
                                        <span>{{ child.name }}</span>
                                    </template>
                                    <!-- 第三层菜单项 -->
                                    <template v-for="(subchild, subIndex) in child.children"
                                              v-if="subchild.level !== 4">
                                        <el-menu-item :index="subchild.path">
                                            <i class="el-icon-setting"></i>
                                            <span>{{ subchild.name }}</span>
                                        </el-menu-item>
                                    </template>
                                </el-submenu>
                                <el-menu-item v-else :index="child.path">
                                    <i class="el-icon-setting"></i>
                                    <span>{{ child.name }}</span>
                                </el-menu-item>
                            </template>
                        </el-submenu>
                    </template>
                </el-menu>
            </el-aside>
            <el-main>
                <el-header style="display: flex;justify-content: space-between;align-items: center;">
                    <div></div>
                    <div class="header-btn">
                        <div class="username" style="color: #fff;font-weight: 700">{{ userData.username }}</div>
                        <el-button type="text" size="small" @click="loginOut" style="color: #fff;margin-left: 50px;">
                            退出登录
                        </el-button>
                    </div>
                </el-header>
                <div class="title" v-if="$route.meta.breadCrumb">
                    <el-breadcrumb separator="/" style="margin-left: 20px;">
                        <template v-for="(item, index) in $route.meta.breadCrumb">
                            <el-breadcrumb-item>{{ item }}</el-breadcrumb-item>
                        </template>
                    </el-breadcrumb>
                    <div style="font-size: 20px;font-weight: 500;margin: 20px 0 0 20px">
                        {{ $route.meta.breadCrumb[$route.meta.breadCrumb.length - 1] }}
                    </div>
                </div>
                <el-main style="height: calc(100% - 100px); overflow-y: auto; margin: 20px">
                    <router-view></router-view>
                </el-main>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import {exitLogin} from "@/index/api/index/index1";
import store from "@/index/store";
import {mapGetters, mapMutations} from "vuex";
import {menuList} from "@/index/api/menu/menu"
import {initSystem} from "@/index/api/index/index1/index"
import Vue from "vue";

export default {
    data() {
        return {
            collapse: false,
            list1: [],
            listData1: [],  //测试1数据
            userData: {
                userId: 1,
                orgId: 1,
                orgName: "",
                username: "",
                nickname: "",
                roleName: "",
                permitId: "1,2,3",
            },
            activeName: 'first',
            first: true,
            title: [
                {name: "测试1",},
            ],
        };
    },
    mounted() {
        this.getMenu()
        initSystem()
            .then((res) => {
                // console.log(res.data);
                this.userData = res.data;
                const permitShowArray = this.userData.permitCode.split(",");
                // console.log(permitShowArray)
                this.$store.commit('setPermitId', permitShowArray);
            })
            .catch((err) => {
                console.log(err);
            });
    },
    methods: {
        hasValidChildren(children) {
            return children.some(child =>
                child.level !== 4 && (!child.children || (child.children && this.hasValidChildren(child.children)))
            );
        },
        getMenu() {
            menuList({mode: "tree"}).then(res => {
                if (res.code == 200) {
                    this.listData1 = res.data;
                }
            })
        },
        clickToIndex() {
            this.$router.push("/index");
        },
        ...mapMutations(["setMenuData"]),
        loginOut() {
            this.$confirm("您确定退出登录吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    exitLogin().then((res) => {
                        if (res.code === 200) {
                            localStorage.removeItem("token");
                            this.$router.push("/index");
                            window.location.reload()
                            this.$message({message: "退出成功", type: "success"})
                        }
                    });
                })
                .catch((error) => {

                });
        },

    },
};
</script>
<style lang="less" scoped>
.el-breadcrumb {
    width: 400px;

    /deep/ .el-tabs__nav {
        width: 400px;
        display: flex;
        justify-content: space-between;

        .el-tabs__item {
            width: 106px;
            height: 75px;
            text-align: center;
            line-height: 90px;
            font-size: 16px;
            font-width: 700;
            padding: 0;
            color: #fff;
        }

        .el-tabs__active-bar {
            width: 90px !important;
            background-color: #4fe3c1 !important;
            height: 5px;
        }
    }
}

.container {
    height: 100%;
}

.el-menu-item.is-active {
    background-color: #409EFF !important; /* 背景色 */
    color: #fff !important; /* 文字颜色 */
}

.el-aside {
    .el-header {
        background-color: #1e46af;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

img {
    vertical-align: middle;
}

span {
    vertical-align: middle;
    color: white;
    //margin-left: 20px;
    font-weight: 600;
}

.el-menu {
    height: calc(100% - 60px);
    background: #fff;
    border-right: none;

    div {
        li {
            span {
                margin-left: 20px;
            }
        }
    }
}

.el-main {
    background-color: #eaedf1;
    padding: 0;

    .el-header {
        background: linear-gradient(to right, #1d44ad, #2a99ff);
    }
}

.aside-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

.header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 20vw;
}

.el-breadcrumb__item {
    margin-top: 20px;
}

.title {
    width: 97%;
    height: 100px;
    background-color: #fff;
    border-radius: 5px;
    margin: 20px 0 0 20px;
}

.el-header {
    padding: 0 0 0 20px;
}
</style>
